<template>
  <div>
    <div class="menu-box">
      <el-row>
        <el-col :span="9">
          <div class="logo" @click="toHome">
            <div style="display: inline-block">
              <el-image
                style="width: 60px; height: 60px"
                :src="imageUrl"></el-image>
            </div>
            <div class="logo-text">
              <span>美食推广</span>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <el-input placeholder="输入商家名称搜索" clearable style="margin-top: 10px">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-menu class="el-menu-demo" :default-active="menu.activeIndex" mode="horizontal" text-color="#000" router>
          <el-menu-item :index="menu.userIndex">你好，{{menu.username}}</el-menu-item>
          <el-menu-item index="/register" @click="itemFun">{{menu.registerText}}</el-menu-item>
          <el-submenu index="1">
            <template slot="title">{{submenuTitle}}</template>
            <el-menu-item :index="item.index" v-for="item in submenu" :key="item.id">{{item.text}}</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">关于平台</template>
            <el-menu-item index="/admin/login">管理员登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-row>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      imageUrl: require('@/assets/image/logo/logo_main.png'),
      menu: {
        activeIndex: '',
        username: '请登录',
        userIndex: '/login',
        registerText: '免费注册'
      },
      submenuTitle: '个人中心',
      submenu: [
        { id: '1', index: '/user/remark', text: '我的评价' },
        { id: '2', index: '/user/favor', text: '我的收藏' },
        { id: '3', index: '/user/info', text: '我的信息' }
      ]
    }
  },
  methods: {
    toHome () {
      this.$router.push('/home')
    },
    changeMenu () {
      if (window.sessionStorage.getItem('uname')) {
        this.menu.username = window.sessionStorage.getItem('uname')
        this.menu.registerText = '退出'
        this.menu.userIndex = '/user/info'
        return
      }
      if (window.sessionStorage.getItem('rnickname')) {
        this.menu.username = window.sessionStorage.getItem('rnickname')
        this.menu.registerText = '退出'
        this.menu.userIndex = '/merchant/home'
        this.submenuTitle = '商家服务'
        this.submenu = [{ id: '1', index: '/merchant/home', text: '商家中心' }]
        return
      }
      this.menu.username = '请登录'
      this.menu.registerText = '免费注册'
      this.menu.userIndex = '/login'
      this.submenuTitle = '个人中心'
      this.submenu = [
        { id: '1', index: '/user/remark', text: '我的评价' },
        { id: '2', index: '/user/favor', text: '我的收藏' },
        { id: '3', index: '/user/info', text: '我的信息' }
      ]
    },
    itemFun () {
      if (window.sessionStorage.getItem('token')) {
        window.sessionStorage.clear()
        return this.$router.push('/login')
      }
      this.$router.push('/register')
    }
  },
  created () {
    this.changeMenu()
  },
  watch: {
    $route (to) {
      this.menu.activeIndex = to.path
      this.changeMenu()
    }
  }
}
</script>

<style scoped>
.logo {
  font-size: 30px;
  float: left;
  margin-left: 20px;
  cursor: pointer;
}
.logo-text {
  display: inline-block;
  margin-left: 20px;
  position: absolute;
  top: 10%;
}
.el-menu {
  float: right;
}
.el-menu-item {
  float: left;
}
.menu-box {
  height: 60px;
  border-bottom: #e6e6e6 solid 1px;
}
</style>
